<template>
    <div class="">
        <div class="search-box">
            <div class="search-box-sub">
            <span class="lable-text">{{$t('devWifi.wifiSN')}}</span>
            <el-input v-model="searchData.wifiSN" clearable></el-input>
            </div>
            <div class="search-box-sub">
            <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button icon="el-icon-thumb" @click="IssuedBatch()">{{$t('devWifi.BatchesOfHair')}}</el-button>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)" :column='column' :select='true'>
            <template #isOnline="{data}">
            <span class="online-text" :class="data.isOnline==1?'active':''">
                {{data.isOnline==1?$t('servicechange.online'):$t('servicechange.offline')}}
            </span>
            </template>
            <template #option="{data}">
            <div class="option-box">
                <el-button size='small' type="primary" icon="el-icon-thumb" :title="$t('devWifi.Issued')" @click='Issued(data)'></el-button>
            </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            searchData:{
                wifiSN:''
            },
            clickType:'',
            wifiSNArr:'',
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            rowDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('devWifi.wifiSN'),
                value: 'wifiSN',
            },{
                title: this.$t('device.inverter.SN'),
                value: 'deviceSN'
            },{
                title: this.$t('servicechange.enableFlag'),
                value: 'isOnline',
                slot: 'isOnline'
            },{
                title: this.$t('control'),
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.initTable()
    },
    methods: {
        async initTable(){
            this.loading = true
            let res = await this.API.gprsGetCardInformationPage({
                size: this.size,
                current: this.current,
                ...this.searchData
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        Issued(data){
            sessionStorage.setItem("wifiSN",data.wifiSN); //wifiSn参数
	    	this.clickType=1;
	    	if(data.isOnline!=1){//0    离线
                this.$message.error(this.$t('devWifi.NotGoDown'))//无法下发
	    	}else{
	    		this.IssuedFun();
	    	}
        },
        IssuedBatch(){
            this.clickType=2;
			this.wifiSNArr=[];//存多个wifiSn  先清空
			var datas = JSON.stringify(this.selectDatalist);// 获取所选的所有id转json字符串
			var selData=eval("("+datas+")");//把json字符串转成json对象5
			for(var i=0;i<selData.length;i++){
				sessionStorage.setItem('wifiSNArr', selData[i].wifiSN);//serviceid
				this.wifiSNArr.push(sessionStorage.getItem("wifiSNArr"));//选择数据中多个id
				if(selData[i].isOnline!=1){
					this.$message.error(this.$t('devWifi.NotGoDown'))//无法下发
		    		return false;
				}
			}
			if(selData==null || selData.length==0){
                this.$message.error(this.$t('devWifi.PleaseSelect'))//请选择下发项
			}
			if(selData!=null && selData.length>0){//有选择数据时
				this.IssuedFun();
			}
        },
        async IssuedFun(){
            var wifiSN=sessionStorage.getItem("wifiSN");//单个下发参数
            if(this.clickType==2){//批量下发时传多个参数
                wifiSN=this.wifiSNArr.join();
            }
            let res = await this.API.gprsGetIccidInfo({
                wifiSNs:wifiSN
            })
            if(res.success){
                this.$message.success(this.$t('devWifi.PleaseWait'))//指令已下发，请等待
                this.uploadPage()
            }else{
                this.$message.error(this.$t('devWifi.Failure'))//下发失败
            }
        },
        uploadPage(){
            this.initTable()
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
    },
};
</script>

<style lang="less">
.online-text{
    color: #999;
    &.active{
        color: #429dff;
    }
}
</style>
